<template>
  <el-row>
    <Title :saying="saying">
      <h1 slot="title">{{ msg }}</h1>
    </Title>
    <Information>
      <div style="height: 550px;">
        <el-scrollbar style="height:100%;" wrapStyle="overflow-x:hidden;">
          <el-timeline >
            <el-timeline-item icon="el-icon-star-on"
                              type="warning"
                              color="#FFAA33"
                              size="large"
                              v-for="(item,index) in works"  :key="index" :timestamp="item.time" placement="top">
                <el-card>
                  <h>{{item.name}}-{{item.position}}</h>
                  <el-collapse v-for="(its,idxa) in item.result"  :key="idxa" v-model="activeName" :data-var="ars=its.split('##')">
                    <el-collapse-item class="leftText" :title="ars[0]" :name="`${index*10+idxa}`">
                      <div>{{ars[1]}}</div>
                    </el-collapse-item>
                  </el-collapse>
                </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </Information>
  </el-row>
</template>

<script>
import Information from "./Information.vue";
import Title from "./Title.vue";
export default {
  name: "Work",
  data() {
    return {
      msg: "工作经历",
      saying: "虽知前路难行，难挡心中执念。",
      works: [],
      activeName: '0'
    };
  },
  components: { Title, Information },
  methods: {
    initWork() {
      this.$Sev.post("/api/works", {}, (data) => {
        data.forEach((element) => {
          this.works.push({
            name: element["name"],
            position: element["position"],
            time: element["time"],
            // result: element["result"],
            result: element["result"].split("@@"),
          });
          // this.loading=true
        });
      });
    },
  },
  mounted() {
    this.initWork();
  },
};
</script>
<style scoped>
.el-carousel {
  margin-top: 5%;
}
.box-card {
  height: 600px;
  opacity: 0.7;
  /* background-color:  #fffef9; */
}
.leftText{
  text-align-last: left;
}
.el-carousel__item:nth-child(2n) {
  background-color: #FF9900;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #FFCC00;
}
.el-step__description.is-success{
  color: #000000;
}
.el-scrollbar__wrap{overflow-x:hidden;}
</style>
